<template>
	<div>
		<el-dialog :title="$t('ktAmtkAsQnp5qXDldDvJ5')" v-model="isUseDialog" draggable :close-on-click-modal="false"
			width="769px" :before-close="handleClose" :destroy-on-close="true" @close="cancelUseClick">
			<el-row :gutter="2" class="w-h-100">
				<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="4">
					<div class="tree-s" style="padding: 6px 0">
						<el-card shadow="hover" class="h-sty" :body-style="{ paddingLeft: '0', paddingRight: '0' }">
							<el-tree :data="treeList" :highlight-current="true" :default-expand-all="true"
								:expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick">
							</el-tree>
						</el-card>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="20">
					<div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
						<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
							<div style="box-sizing: border-box">
								<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
									<el-form class="box-f" ref="ruleFormRef" :inline="true">
										<el-form-item :label="$t('guan-jian-zi')">
											<el-input style="width: 120px" v-model="userSearch"
												:placeholder="$t('qing-shu-ru-yong-hu-xing-ming')" clearable />
										</el-form-item>
										<el-form-item :label="$t('zhuang-tai-0')">
											<el-select style="width: 120px" v-model="userStatusSearch" class="m-2"
												:placeholder="$t('qing-xuan-ze-zhuang-tai')">
												<el-option v-for="item in userStatusArr" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
										</el-form-item>
										<el-form-item style="margin-right: 0">
											<el-button @click="resetClick" icon="ele-Refresh"> {{
												$t('u2lRbgkoIgj4s70umsVDz') }} </el-button>
											<el-button @click="searchClick" type="primary" icon="ele-Search"> {{
												$t('sou-suo') }} </el-button>
										</el-form-item>
									</el-form>
								</el-card>
							</div>

							<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
								<div class="pos-a w-h-100" style="box-sizing: border-box">
									<el-card class="box-card w-h-100" shadow="hover">
										<div style="" class="w-h-100 ver-flex">
											<div class="flex-1 pos-r">
												<div class="pos-a w-h-100" style="box-sizing: border-box; overflow: hidden">
													<el-table @select-all="getSelectionRowsList"
														@select="getSelectionRowsList" :data="list" class="w-h-100"
														style="width: 100%" border
														element-loading-background="rgba(0, 0, 0, 0.5)">
														<el-table-column type="selection" width="55" align="center" />
														<el-table-column prop="account" :label="$t('zhang-hao')"
															align="center" />
														<el-table-column prop="nickName" :label="$t('xing-ming')"
															align="center" />
														<el-table-column prop="sex" :label="$t('xing-bie')" align="center">
															<template #default="scope">
																{{ scope.row.sex == 1 ? '男' : '女' }}
															</template>
														</el-table-column>
														<el-table-column prop="phone" :label="$t('shou-ji')"
															align="center" />
														<el-table-column prop="status" :label="$t('zhuang-tai')"
															align="center">
															<template #default="scope">
																{{ scope.row.status == 0 ? '正常' : '停用' }}
															</template>
														</el-table-column>
													</el-table>
												</div>
											</div>
											<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
												<el-pagination v-model:currentPage="pageNo" v-model:page-size="pageSize"
													:total="totalRows" :page-sizes="[10, 20, 50, 100]" small background
													@size-change="handleSizeChange" @current-change="handleCurrentChange"
													layout="total, sizes, prev, pager, next, jumper" class="w-h-100" />
											</div>
										</div>
									</el-card>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<template #footer>
				<el-button @click="cancelUseClick">{{ $t('qu-xiao') }}</el-button>
				<el-button type="primary" @click="submitForm">{{ $t('que-ding') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, toRaw } from 'vue';
import {
	getSysOrgTreeList, //机构树
	getQueryPageList, //用户详细列表
} from '/@/api/workFlow/index';
import getTableData from '/@/utils/getTableData';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

export default defineComponent({
	name: 'add-edit-not-received',
	components: {},
	props: {
		isUseDialog: {
			type: Boolean,
			default: false,
		},
		repairInfo: {
			type: String,
			default: '',
		},
	},
	setup(props, ctx) {
		const { proxy } = useCurrentInstance();
		const $t = proxy.$t;
		const defaultProps: object = {
			children: 'children',
			label: 'title',
			value: 'id',
		};
		const ruleFormRef = ref();
		const userStatusArr = [
			{ value: 0, label: $t('zheng-chang') },
			{ value: 1, label: $t('ting-yong') },
			{ value: 2, label: $t('uuBhAvlojofx8Bb4jgKo') },
		];

		// 获取机构树
		const treeList: any = ref([]);
		const getTreelist = async () => {
			try {
				let res = await getSysOrgTreeList();
				treeList.value = res.data;
			} catch (error) {
				console.log(error);
			}
		};
		getTreelist(); //获取机构树
		const searchObj: any = reactive({});
		const userSearch = ref();
		const userStatusSearch = ref();
		const searchClick = () => {
			if (userSearch.value != undefined) {
				searchObj.searchValue = userSearch.value;
			}
			if (userStatusSearch.value != undefined) {
				searchObj.searchStatus = userStatusSearch.value;
			}
		};
		let tableDataObj = getTableData(getQueryPageList, {}, searchObj);
		//  树型当前节点点击事件
		const userList = ref([]); //用户列表
		const handleNodeClick = async (data: any, node: any, obj: any) => {
			const setNode = toRaw(node); //sysEmpParam.
			Object.assign(searchObj, { 'sysEmpParam.orgId': setNode.data.id });
		};

		const selectUser = ref({}); //选择的用户
		//  获取选择的用户
		const getSelectionRowsList = (val: any) => {
			selectUser.value = val;
		};

		//  重置按钮
		const resetClick = () => {
			userSearch.value = '';
			userStatusSearch.value = '';
			Object.assign(searchObj, { searchValue: '' });
			tableDataObj.getData();
		};

		/*** handleClose 关闭按钮点击事件 */
		const handleClose = () => {
			ctx.emit('cancelUseClicks');
		};

		/*** cancelUseClick 取消事件 */
		const cancelUseClick = () => {
			ctx.emit('cancelUseClicks');
		};

		//    提交事件
		const submitForm = () => {
			ctx.emit('userLists', { titleCon: selectUser.value });
			ctx.emit('cancelUseClicks');
		};

		/*** 监听isUseDialog的变化 */
		// watch(
		// 	() => props.isUseDialog,
		// 	(newVal) => {
		// 		if (newVal) {
		// 			if (props.repairInfo !== '') {
		// 				console.log(123);
		// 			}
		// 		}
		// 	}
		// );

		/*** isUseDialog 响应弹窗的关闭  */
		const isUseDialog = computed(() => {
			return props.isUseDialog;
		});

		return {
			handleClose,
			submitForm,
			cancelUseClick,
			isUseDialog,
			treeList, //机构树数据
			defaultProps,
			handleNodeClick,
			userList,
			...tableDataObj,
			getSelectionRowsList,
			searchClick,
			userSearch,
			userStatusSearch,
			userStatusArr,
			resetClick,
			ruleFormRef,
		};
	},
});
</script>
<style scoped lang="scss"></style>
